<%@page import="com.fasterxml.jackson.annotation.JsonInclude.Include"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <script type="text/javascript" src="${ctx}/js/lib.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.SuperSlide.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.scrollLoading.js"></script>
	<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.scrollLoading").lazyload({effect: "fadeIn",threshold :300});  
          $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
      });
    </script>
    <title>软装到家</title>
</head>
<body>
  <%@include file="../common_head.jsp" %>
 <%@include file="../common_nav.jsp" %>
 
<div class="w-1200 margin-0-auto" id="ogmall_left">
	<div class="blank10"></div>
	<div class="ogmall_lbrz_title">
        <h1>软装设计师</h1><h2>Interior Decoration Designer</h2>
    </div>
    <div class="ogmall_customer">
        <div class="choice">
            <div class="li">
                <b>所在城市：</b>
                <ul id="choosen_city">
                    <c:choose>
	            	<c:when test="${cityId == null }">
	            		<li><a onclick="selectAll(this)" class="on">不限</a></li>
	            	</c:when>
	            	<c:otherwise>
	            		<li><a onclick="selectAll(this)">不限</a></li>
	            	</c:otherwise>
            		</c:choose>
            		
            		<c:forEach items="${citys }" var="c" varStatus="cs">
            		<li data-obj-id="${c.id }" data-obj-name="${c.name }">
            			<c:choose>
	            		<c:when test="${cityId != null and cityId == c.id }">
		            		<a href="#" class="on">${c.name }</a>
		            	</c:when>
		            	<c:otherwise>
		            		<a href="#">${c.name }</a>
		            	</c:otherwise>
		            	</c:choose>
            		</li>
            	</c:forEach>
            	
                    <!-- <li><a href="#" class="on">不限</a></li><li><a href="#">北京</a></li><li><a href="#">上海</a></li><li><a href="#">广州</a></li><li><a href="#">长沙</a></li><li><a href="#">深圳</a></li> -->
                </ul>
            </div>
            <div class="li">
                <b>擅长风格：</b>
                <ul id="choosen_houseType">
                <c:choose>
	            	<c:when test="${goodAtStyles == null or goodAtStyles == ''}">
	            		<li><a onclick="selectAll(this)" class="on">不限</a></li>
	            	</c:when>
	            	<c:otherwise>
	            		<li><a onclick="selectAll(this)">不限</a></li>
	            	</c:otherwise>
            	</c:choose>
            	
            	<c:forEach items="${houseStyles }" var="hs" varStatus="hss">
            		<li data-obj-id="${hs.name }" data-obj-name="${hs.name }">
            			<c:choose>
            			<c:when test="${goodAtStyles != null and goodAtStyles eq hs.name and goodAtStyles != '' }">
		            		<a href="#" class="on">${hs.name }</a>
		            	</c:when>
		            	<c:otherwise>
		            		<a href="#">${hs.name }</a>
		            	</c:otherwise>
		            	</c:choose>
            		</li>
            	</c:forEach>
                    <!-- <li><a href="#" class="on">不限</a></li><li><a href="#">欧式</a></li><li><a href="#">法式</a></li><li><a href="#">美式</a></li> -->
                </ul>
            </div>
            <div class="li">
                <b>排序：</b>
                <ul>
                	<ul id="choosen_orderType">
                	<c:choose>
                		<c:when test="${orderType==null }">
                			<li><a class="on" href="#">默认</a></li>
                		</c:when>
                		<c:otherwise>
                			<li><a href="#">默认</a></li>
                		</c:otherwise>
                	</c:choose>
                	<c:choose>
                		<c:when test="${orderType==1 }">
                			<li  data-obj-id="1" ><a class="on" href="#">预约数</a></li>
                		</c:when>
                		<c:otherwise>
                			<li data-obj-id="1"><a href="#">预约数</a></li>
                		</c:otherwise>
                	</c:choose>
                	<%-- <c:choose>
                		<c:when test="${orderType==2 }">
                			<li  data-obj-id="2"><a class="on" href="#">签单数</a></li>
                		</c:when>
                		<c:otherwise>
                			<li data-obj-id="2"><a href="#">签单数</a></li>
                		</c:otherwise>
                	</c:choose> --%>
                </ul>
            </div>
        </div>
        <div class="ogmall_designer_list">
        	<div class="title"><h1>主要作品</h1><div class="ogmall_more">
        	<a href="${ctx }/designer/${designerId==null ? 'index' : 'detail?designerId='}${designerId }" >更多</a></div></div>
            <div class="designer_pic">
                <ul class="bigImg">
                	
                    <li><h2>${design.title }</h2>
	                    <p>${design.houseType.name }&nbsp;&nbsp;&nbsp;&nbsp;${design.houseStyle.name }&nbsp;&nbsp;&nbsp;&nbsp;<em>￥${design.price }</em></p>
	                    <a href="${ctx }/design/detailNew?id=${design.id}"><img src="${design.headImage }" style="width:900px;height:590px;"/></a>
                    </li>
                    <!-- <li><h2>沐光</h2><p>三室一厅&nbsp;&nbsp;&nbsp;&nbsp;现代简约&nbsp;&nbsp;&nbsp;&nbsp;<em>￥120000</em></p><img src="img/14.jpg" /></li>
                    <li><h2>沐光之寓</h2><p>三室一厅&nbsp;&nbsp;&nbsp;&nbsp;现代简约&nbsp;&nbsp;&nbsp;&nbsp;<em>￥120000</em></p><img src="img/14.jpg" /></li>
                    <li><h2>沐光之寓</h2><p>三室一厅&nbsp;&nbsp;&nbsp;&nbsp;现代简约&nbsp;&nbsp;&nbsp;&nbsp;<em>￥120000</em></p><img src="img/14.jpg" /></li>
                    <li><h2>沐光之寓</h2><p>三室一厅&nbsp;&nbsp;&nbsp;&nbsp;现代简约&nbsp;&nbsp;&nbsp;&nbsp;<em>￥120000</em></p><img src="img/14.jpg" /></li>
                    <li><h2>沐光之寓</h2><p>三室一厅&nbsp;&nbsp;&nbsp;&nbsp;现代简约&nbsp;&nbsp;&nbsp;&nbsp;<em>￥120000</em></p><img src="img/14.jpg" /></li>
                    <li><h2>沐光之寓</h2><p>三室一厅&nbsp;&nbsp;&nbsp;&nbsp;现代简约&nbsp;&nbsp;&nbsp;&nbsp;<em>￥120000</em></p><img src="img/14.jpg" /></li>
                    <li><h2>沐光之寓</h2><p>三室一厅&nbsp;&nbsp;&nbsp;&nbsp;现代简约&nbsp;&nbsp;&nbsp;&nbsp;<em>￥120000</em></p><img src="img/14.jpg" /></li>
                    <li><h2>沐光之寓</h2><p>三室一厅&nbsp;&nbsp;&nbsp;&nbsp;现代简约&nbsp;&nbsp;&nbsp;&nbsp;<em>￥120000</em></p><img src="img/14.jpg" /></li>
                    <li><h2>沐光之寓</h2><p>三室一厅&nbsp;&nbsp;&nbsp;&nbsp;现代简约&nbsp;&nbsp;&nbsp;&nbsp;<em>￥120000</em></p><img src="img/14.jpg" /></li> -->
                </ul>
                <div class="smallScroll">
                <a class="sPrev" href="javascript:void(0)"></a>
                    <div class="smallImg">
                        <ul id="choosen_designer">
                        	<c:forEach items="${designers }" var="d">
                        		<c:choose>
                        			<c:when test="${d.id==designerId }">
                        				<li class="on" onclick="changeDesigner(this)" data-obj-id="${d.id }"><img src="${d.user.headImage }" /><p>${d.user.realName }</p></li>
                        			</c:when>
                        			<c:otherwise>
                        				<li onclick="changeDesigner(this)" data-obj-id="${d.id }"><img src="${d.user.headImage }" /><p>${d.user.realName }</p></li>
                        			</c:otherwise>
                        		</c:choose>
                        		
                        	</c:forEach>
                            <!-- <li><img src="img/4.jpg" /><p>李晓横</p></li>
                            <li><img src="img/4.jpg" /><p>李晓横</p></li>
                            <li><img src="img/4.jpg" /><p>李晓横</p></li>
                            <li><img src="img/4.jpg" /><p>李晓横</p></li>
                            <li><img src="img/4.jpg" /><p>李晓横</p></li>
                            <li><img src="img/4.jpg" /><p>李晓横</p></li>
                            <li><img src="img/4.jpg" /><p>李晓横</p></li>
                            <li><img src="img/4.jpg" /><p>李晓横</p></li>
                            <li><img src="img/4.jpg" /><p>李晓横</p></li>
                            <li><img src="img/4.jpg" /><p>李晓横</p></li> -->
                        </ul>
                    </div>
                <a class="sNext" href="javascript:void(0)"></a>
                </div>
            </div>
			<script type="text/javascript">
                jQuery(".designer_pic").slide({ titCell:".smallImg li", mainCell:".bigImg", effect:"fold2", autoPlay:false,delayTime:200,trigger:"click"});
                jQuery(".designer_pic .smallScroll").slide({ mainCell:"ul",delayTime:100,vis:8,scroll:1,effect:"left",autoPage:true,prevCell:".sPrev",nextCell:".sNext",pnLoop:true});
            </script> 
            <div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
            <!--page-->
        	<!-- <div class="ogmall_page"><a href="#">上一页</a><span>1</span><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><span>...</span><a href="#">下一页</a></div> -->
        	<!--page END-->
        </div> 
    </div>
</div>
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
 <%@include file="../foot.jsp" %>
<style>
.ogmall_left_nav{top:200px !important}
</style>
<%@include file="../left_nav.jsp" %>
<script type="text/javascript" src="${ctx}/js/plugins.js"></script>
<script type="text/javascript" src="${ctx}/js/modules.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<script type="text/javascript">
	jQuery(".ogmall_designer_list").slide({triggerEvent:true,trigger:"click"});
	$(function(){
		var scrollDir = 'down',lastScrollTop = $(window).scrollTop();
		var viewHeight = $(window).height(); //获取视窗高度
		$(window).scroll(function(event){
			viewHeight = $(window).height();
			var ling = $(window).scrollTop();
			var ct = ling - lastScrollTop;
			if(ling > ($('#ogmall_left').offset().top-viewHeight)){
				$('#ogmall_left_nav').show();
				$('#ogmall_left_nav').removeClass('ogmall_left_nav');
				
				if($('#ogmall_left').offset().top>ling){
					var top = $('#ogmall_left').offset().top-ling+20;
					if(top <20){
						top =20;
					}
					$('#ogmall_left_nav').css({top:top+'px'})
				}else{
					$('#ogmall_left_nav').css({top:20+'px'})
				}
				
			}else{
				$('#ogmall_left_nav').hide();
				$('#ogmall_left_nav').addClass('ogmall_left_nav');
				fixed = false;
			}
			lastScrollTop = ling;
		})
	})	
	$(function(){
		var a =$("#ogmall_left_nav li:gt(0)");
			a.hide();
		$(".f0").click(function(){
			if(a.is(':visible')){
				 a.slideUp('fast');
				 $(this).removeClass('f1');
			}else{
				a.slideDown('fast').show();	
				$(this).addClass('f1');
			}			
		});
	});
	
	  $(document).ready(function(){
        $('#choosen_city li').on('click',function() {
        	changeChoose(this);
        	gotoWhenSelected();
        });
        $('#choosen_houseType li').on('click',function() {
        	changeChoose(this);
        	gotoWhenSelected();
        });
        $('#choosen_orderType li').on('click',function() {
        	changeChoose(this);
        	gotoWhenSelected();
        });
        setNav(2);
    });
    
    function selectAll(obj) {  //选择全部
    	var span = $(obj).parent();
    	var lis = $(span).next('ul').find('li a');
    	lis.removeClass('on');
    	gotoWhenSelected();
    }
    
    function gotoWhenSelected() {   //查找选择
    	var citys = $('#choosen_city').find('.on');
    	var choosenCity = '';
    	if(citys.length >0 &&citys.html()!='不限') {
    		var parentLi = $(citys[0]).parents('li');
    		var data = $(parentLi).data();
    		choosenCity = data.objId;
    	}
    	
    	
    	var orderType = $('#choosen_orderType').find('.on');
    	var choosen_orderType = '';
    	if(orderType.length > 0 && orderType.html()!='默认') {
    		var parentLi = $(orderType[0]).parents('li');
    		var data = $(parentLi).data();
    		choosen_orderType = data.objId;
    	}
    	
    	var houseStyles = $('#choosen_houseType').find('.on');
    	var choosen_houseStyle = '';
    	if(houseStyles.length > 0 && houseStyles.html()!='不限') {
    		var parentLi = $(houseStyles[0]).parents('li');
    		var data = $(parentLi).data();
    		choosen_houseStyle = data.objId;
    	}
    	
    	var designerId = $('#choosen_designer').find('.on');
    	var choosen_designer = '';
    	if(designerId.length > 0) {
    		var data =  $(designerId[0]).data();
    		choosen_designer = data.objId;
    	}
    	
    	location = '${ctx}/designer/index?cityId='+choosenCity
    	+"&goodAtStyles="+choosen_houseStyle
    	+"&orderType="+choosen_orderType
    	+"&designerId="+choosen_designer;	
    }
    
    function changeChoose(obj) {
    	var lis = $(obj).parents('ul').find('li a');
    	lis.removeClass("on");
    	$(obj).find('a').addClass('on');
    }

	function changeDesigner(obj){
		var lis=$(obj).parents('ul').find('li');
		lis.removeClass("on");
    	$(obj).addClass('on');
    	gotoWhenSelected();
	}
</script>
</body>
</html>